
/**
 * Created by seeker910 on 2014/8/28.
 * @description 组件名称命名约定：继承container组件，名称以ViewPart结尾;继承control组件，名称以Part结尾
 * svg + title + text
 */
Rsd.define('Rsd.hermit.sections.SvgContentPart', {
    extend: 'Rsd.control.Svg',
    requires: [
        'Rsd.form.Image',
        'Rsd.form.Text',
        'Rsd.form.Button'
    ],
    xtype: 'svg-content',
     /**
     * @description 标识该组件是否允许编辑
     */
    domEditable:true,
     /**
     * @description true:表示只允许在模板中修改
     */
    editInMaster:false, 
    label: { 
        position: 'right',
        space: 30,
        width: 180,//需要设置固定长度，设置auto时，在编辑时缩放 会导致svg 变形
        height: 100,
        xtype: 'container',
        header:false,
        layout:'vbox',
        style:{display:'flex',justifyContent:'center'},
        items:[
            {
                xtype:'label',
                label:false,
                ctrlTagName: 'h2',  
                style:{ 
                    width: '100%', 
                    color: '#000',
                    fontSize:'120%',
                    fontWeight:400
                }
            },
            {
                xtype:'label',
                label:false,   
                style: { 
                    width: '100%',
                    color: 'grey'
                }
            },
        ]
    },  
    schema:{
        type: 'object',
        title: 'svg组件',
        for:'dataSource',//只适配dataSource属性
        properties:{
            "title":{
                type:'string', 
                title:'标题', 
            }, 
            "text":{
                type:'string',
                title:'副标题', 
            },
            "svg":{
                type: 'object',
                title:'svg', 
                 properties:{ 
                    viewBox:{
                        type:'string',
                        title:'View Box', 
                    },
                    fill:{
                        type:'string',
                        title:'颜色', 
                    },
                    paths:{
                        type:'array',
                        title:'路径',
                        height:300,
                        items:{
                             type:'string',
                        }
                    }
                 }
            }
        },
         viewTemplate:{
            'listItemEditView':{
                xtype:'svg-content', 
                margin: '10px 2% 0 2%',
                width: '95%',
                height: 160,  
                key:"{{=id}}",
                dataSource:{
                    title:'{{=dataSource.title}}',
                    text:'{{=dataSource.text}}',
                    svg:{
                        viewBox:'{{=dataSource.svg.viewBox}}',
                        paths:'{{=dataSource.svg.paths}}'
                    }
                }
            }
        }
    },
    /**
     * {
     *     title:'Title',
           text:'Sub Title',
           svg:{ path:""}
     * }
     */
    dataSource:{},
    /**
     * 
     * @param {*} config 
     */
    constructor: function SvgContentPart(config) {
        config = config || {}; 
        Rsd.apply(this, config);   
    },
    /**
     * 
     */
    loadData:function loadData(dataSource)
    { 
        this.dataSource = dataSource||this.dataSource||{};
        this.label.content.items[0].setText(this.dataSource.title);
        this.label.content.items[1].setText(this.dataSource.text);

        this.callParent(this.dataSource.svg||{});
    }

},function(type) { 

});



